<template>
  <div class="coming">
	  <ul>
	  	  <li v-for="item in comingPlayData" :key="item.id">
	  		  <div class="img-wraper"><img :src="item.img" ></div>
	  		  <div class="desc-warper">
	  			  <p class="name">{{item.name}}</p>
	  			  <p><span class="desc-color">{{item.people}}</span></p>
	  			  <p class="desc-color actors">{{item.actors}}</p>
	  			  <p class="desc-color">{{item.day}}</p>
	  		  </div>
	  		  <div class="button-wraper">
	  			  <button>预售</button>
	  		  </div>
	  	  </li>
		</ul>
  </div>
</template>
<script >
export default{
	name:'Coming',
	data(){
		return{
			comingPlayData: []
		}
	},
	created() {
		this.getComingPlayData();
	},
	methods:{
		getComingPlayData(){
			// var that = this;
			axios.get('/mock/comingPlayData.json')
			  .then(response => {
			    console.log(response);
				if(response.status == 200){
					if(response.data && response.data.comingPlayData){
						this.comingPlayData = response.data.comingPlayData;
					}
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		}
	}
}
</script>
<style scoped>
	.button-wraper{
		float: right;
		line-height: 80px;
	}
	img{
		width:70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom: 8px;
		float: left;
	}
	.desc-warper{
		width: 60%;
		float: left;
	}
	li{
		margin: 15px;
		/* 清除浮动 */
		overflow: hidden;
		border-bottom: 1px solid #CCCCCC;
	}
	.desc-color{
		color: #666666;
		font-size: 15px;
	}
	.name{
		font-size: 18px;
		font-weight: bold;
	}
	.actors{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	p{
		line-height: 24px;
	}
	button{
		width: 50px;
		height: 30px;
		color:white;
		background-color:cornflowerblue;
		border-radius: 5px;
		border: none;
		font-weight: bold;
	}
</style>
